<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue框架 通过cdn方式加载Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 1.文本插值语法 Mustache语法  -->
        {{msg}}
        <!-- 2.v-html 将标签字符串解析成标签 -->
        <div v-html="a"></div>
        <!-- 3.动态绑定 绑定一个变量 -->
        <div v-bind:title="title">块级元素</div>
        <!-- v-bind可以简写为： -->
        <div :title="title">块级元素</div>
        <!-- 4.动态绑定多个值 -->
        <section v-bind="obj">块级元素</section>
        <!-- 5.使用js表达式 -->
        {{3>5?'YES':'NO'}}
        <!-- split可以将字符串转为数组
            reverse方法可以翻转数组元素 12345 54321
            join可以将数组转为字符串
            -->
        {{msg.split(' ').reverse().join(' ')}}
        <!-- 给按钮绑定事件 v-on:事件类型 = '事件处理程序' -->
        {{count}}
        <button v-on:click="handler">点击我</button>
        <!-- v-onf事件绑定简写为@ -->
        <button @click="handler">点击我</button>
        <!-- 计算属性 处理响应式状态 -->
        {{rever}}
        <!-- 条件渲染 v-if v-else-if v-else -->
        <div v-if="score>=90&&score<=100">优秀</div>
        <div v-else-if="score>=80&&score<90">良好</div>
        <div v-else-if="score>=70&&score<80">中等</div>
        <div v-else>及格</div>
        <!-- 列表渲染 arr  item表示数组每一项 index表示数组每一项对应的索引-->
        <ul>
            <li v-for="(item,index) in arr" :key="item.id">
                {{index}}--{{item.name}}
            </li>
        </ul>
    </div>
    <script>
        const { createApp, ref, computed } = Vue;
        // 创建一个vue应用 mount()应用和视图层进行绑定
        createApp({
            // 应用入口函数
            setup() {
                const msg = ref('hello Vue3');
                const a = ref('<a href="https://www.baidu.com">百度一下</a>');
                const title = ref('我是一个div');
                const obj = ref({
                    id: 'one',
                    class: 'two',
                    style: 'background-color:red'
                });
                const count = ref(0);
                // 90优秀 80-90良好 70-80中等 60-70及格 
                const score = ref(85);
                // 声明一个数组
                const arr = ref([{
                    id: 1,
                    name: 'terry'
                },
                {
                    id: 2,
                    name: 'larry'
                },
                {
                    id: 3,
                    name: 'ronda'
                }])
                // 声明一个函数处理count
                const handler = () => {
                    count.value++
                }
                //  针对hello Vue3 倒序输出 Vue3 hello 
                const rever = computed(() => {
                    // toUpperCase将小写字符串转为大写字符串 hello HELLO
                    return msg.value.split(' ').reverse().join(' ').toUpperCase()
                })
                // 将状态暴露给模板 
                return {
                    msg,
                    a,
                    title,
                    obj,
                    count,
                    handler,
                    rever,
                    score,
                    arr
                }
            }
        }).mount('#app')
    </script>
</body>

</html>